/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

/* ------------------------------------------------------------------------- *
 * Layout
 * ------------------------------------------------------------------------- */

/*
 * Apply a natural box layout model to all elements:
 * http://www.paulirish.com/2012/box-sizing-border-box-ftw/
 */
*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: rgb(80, 80, 80);
}

.top    { position: absolute; left:  0; top:    0; width: 100%;             height: calc(70% - 2px); }
.bottom { position: absolute; left:  0; bottom: 0; width: 100%;             height: calc(30% - 2px); }
.left   { position: absolute; left:  0; top:    0; width: calc(70% - 2px);  height: 100%; }
.right  { position: absolute; right: 0; top:    0; width: calc(30% - 2px);  height: 100%; }

.hsplitter {
    position: absolute;
    left: 0;
    top: calc(70% - 3px);
    width: 100%;
    height: 6px;
    cursor: ns-resize;
}

.vsplitter {
    position: absolute;
    left: calc(70% - 3px);
    top: 0;
    width: 6px;
    height: 100%;
    cursor: ew-resize;
}

.right {
    overflow-x: hidden;
    overflow-y: auto;
}

.btn-group {
    white-space: nowrap;
}

.message {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    padding: 0.5em 1em;
    opacity: 0;
    visibility: hidden;
    transition: visibility 0s 0.5s, opacity 0.5s ease;
}

.message .title {
    font-weight: bold;
}

.message.visible {
    opacity: 1;
    visibility: visible;
    transition: visibility 0s 0s, opacity 0.5s ease;
}

/* ------------------------------------------------------------------------- *
 * Colors
 * ------------------------------------------------------------------------- */

.top .left {
    background-image: linear-gradient(-45deg,
        rgb(80, 80, 80) 25%, rgb(64, 64, 64) 25%, rgb(64, 64, 64) 50%,
        rgb(80, 80, 80) 50%, rgb(80, 80, 80) 75%, rgb(64, 64, 64) 75%, rgb(64, 64, 64));
    background-size: 1em 1em;
}

.right {
    background: rgb(64, 64, 64);
}

.hsplitter, .vsplitter {
    background: rgb(64, 64, 64);
}

.hsplitter:hover, .vsplitter:hover {
    background: rgb(80, 80, 80);
}

/*
 * Form elements
 */

input[type=text],
input[type=number],
section[contenteditable=true],
select,
button {
    border-radius: 0.5em;
    border: none;
    padding: 0.3em 0.5em;
    color: black;
}

input[type=text],
input[type=number],
section[contenteditable=true] {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5) inset;
    background-color: white;
}

select,
button {
    background: linear-gradient(to bottom, rgb(220, 220, 220), rgb(180, 180, 180) 100%);
}

option {
    background: rgb(220, 220, 220);
}


input:disabled {
    background: rgb(220, 220, 220);
}

input:disabled,
button:disabled {
    color: rgb(150, 150, 150);
}

.active {
    background: linear-gradient(to bottom, rgb(150, 200, 200), rgb(180, 220, 220) 100%);
}

.multiple {
    background-image: linear-gradient(-45deg,
        rgb(150, 200, 200) 25%, rgb(220, 220, 220) 25%, rgb(220, 220, 220) 50%,
        rgb(150, 200, 200) 50%, rgb(150, 200, 200) 75%, rgb(220, 220, 220) 75%, rgb(220, 220, 220));
    background-size: 1em 1em;
}

.btn-group button:first-child:not(:last-child) {
    border-top-left-radius: 0.5em;
    border-bottom-left-radius: 0.5em;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 1px solid rgb(80, 80, 80);
}

.btn-group button:last-child:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 0.5em;
    border-bottom-right-radius: 0.5em;
}

.btn-group button:not(:first-child):not(:last-child) {
    border-radius: 0;
    border-right: 1px solid rgb(80, 80, 80);
}

.message.info {
    background-color: rgba(150, 200, 200, 0.8);
}

.message.error {
    background-color: rgba(255, 100, 100, 0.8);
}

/* ------------------------------------------------------------------------- *
 * Fonts
 * ------------------------------------------------------------------------- */

body {
    font-size: small;
    font-family: "Roboto", serif;
}

.top-left p {
    font-size: 200%;
    text-align: center;
}
